<script>

import KtIcon from "/src/components/node-kantboot/components/KtIcon/KtIcon.vue";
import SaveDialog from "./components/SaveDialog.vue";
import I18nNameEditDialog from "./components/I18nNameEditDialog.vue";
import I18nDescriptionEditDialog from "./components/I18nDescriptionEditDialog.vue";
import I18nAcceptRangeEditDialog from "./components/I18nAcceptRangeEditDialog.vue";
import VisaGoodsPriceDialog from "/src/views/manage/visa/visaGoods/components/visaGoodsPriceDialog.vue";

export default {
  components: {
    VisaGoodsPriceDialog,
    SaveDialog, KtIcon, I18nNameEditDialog,I18nDescriptionEditDialog,I18nAcceptRangeEditDialog},
  data() {
    return {
      visaContinentsList: [
        {
          id: 1,
          name: '亚洲'
        },
        {
          id: 2,
          name: '欧洲'
        },
        {
          id: 3,
          name: '非洲'
        },
        {
          id: 4,
          name: '北美洲'
        },
        {
          id: 5,
          name: '南美洲'
        },
        {
          id: 6,
          name: '大洋洲'
        }
      ],
      visaContinentsMap: {},
      bodyData: [],

    }
  },
  created() {
    this.getAllNew();
  },
  mounted() {
  },
  methods: {
    openPriceDialog(visaGoodsId){
      this.$refs.visaGoodsPriceDialog.open(visaGoodsId);
    },
    toSaveNew(item) {
      // alert(JSON.stringify(item));
      this.$refs.saveDialog.openNew(item);
    },
    toSave(item){
      this.$refs.saveDialog.open(item);
    },
// /bus-visa-web/admin/visaGoods/getAllNew
    getAllNew() {
      this.$kt.request.send({
        uri: "/bus-visa-web/admin/visaGoods/getAllNew",
        data: {},
        stateSuccess: (res) => {
          this.bodyData = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    },
    toRemove(item) {
      // 提示是否删除
      this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // /bus-visa-web/admin/visaGoods/remove
        this.$kt.request.send({
          uri: "/bus-visa-web/admin/visaGoods/remove",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getAllNew();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        });
      });
    }
  }
}
</script>

<template>
  <save-dialog
      @save="getAllNew()"
      ref="saveDialog"
  ></save-dialog>
  <i18n-name-edit-dialog
  ref="i18nNameEditDialog"
  ></i18n-name-edit-dialog>
  <i18n-description-edit-dialog
  ref="i18nDescriptionEditDialog"
  ></i18n-description-edit-dialog>
  <i18n-accept-range-edit-dialog
  ref="i18nAcceptRangeEditDialog"
  ></i18n-accept-range-edit-dialog>
  <visa-goods-price-dialog
  ref="visaGoodsPriceDialog"
  ></visa-goods-price-dialog>
  <div class="box">
    <div class="in-box">
      <div
          v-for="item in visaContinentsList"
          class="in-box-card">
        <div class="in-box-card-title">{{ item.name }}</div>
        <el-scrollbar style="height: 300px;padding: 10px;box-sizing: border-box">
          <div
              v-for="(item1,index1) in bodyData"
          >
            <div
                v-if="item1.continentId === item.id"
                class="in-in">
              <div>
                <el-image
                    fit="cover"
                :src="$kt.file.visit(item1.fileIdOfImage)"
                style="width: 100%;height: 150px;border-radius: 20px"
                ></el-image>
              </div>
              <div style="text-align: center">{{ item1.name }}</div>
              <div style="height: 10px"></div>
              <div style="text-align: right">
                <el-button
                    @click="openPriceDialog(item1.id)"
                    type="primary" size="small">
                  {{ $i18n.zhToGlobal("价格制定") }}
                </el-button>
                <el-button
                    @click="toSave(item1)"
                    size="small">
                  <kt-icon icon="el-icon-edit"></kt-icon>
                </el-button>
                <el-button
                    @click="toRemove(item1)"
                    type="danger" size="small">
                  <kt-icon
                      color="#fff"
                      icon="el-icon-delete"></kt-icon>
                </el-button>
              </div>
              <div style="height: 10px"></div>
              <div style="text-align: right">
                <el-button
                    @click="$refs.i18nNameEditDialog.open(item1)"
                    size="small">
                  名称多语言
                </el-button>
                <el-button
                    @click="$refs.i18nDescriptionEditDialog.open(item1)"
                    size="small">
                  描述多语言
                </el-button>
                <el-button
                    @click="$refs.i18nAcceptRangeEditDialog.open(item1)"
                    size="small">
                  受理范围多语言
                </el-button>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <div class="in-box-bottom">
          <div
              @click="toSaveNew(item)"
              class="in-box-bottom-btn">添加
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.in-box {
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;

  .in-box-card {
    text-align: left;
    display: inline-block;
    width: 400px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 10px;

    .in-box-card-title {
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #dddddd;
    }
  }

  .in-box-bottom {
    padding: 10px 20px 10px 20px;
    box-sizing: border-box;
    background-color: #000000;
    color: #ffffff;
    border-radius: 0 0 10px 10px;
    text-align: center;
    letter-spacing: 2px;

    .in-box-bottom-btn {
      cursor: pointer;
    }
  }
}

.in-box-bottom-btn:hover {
  color: rgba(255, 255, 255, .8);
}

.in-box-bottom-btn:active {
  color: #ffffff;
}

.in-in {
  padding: 20px;
  border-bottom: 1px solid #eeeeee;
}

</style>